/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Badges

## Badges

You can easily create notification badges in two ways:

### Use the .ic-badge class

```html
<span class="ic-badge">9</span>
<span class="ic-badge ic-badge--success">99+</span>
<span class="ic-badge ic-badge--alert">25</span>
<span class="ic-badge ic-badge--danger">8</span>
```

### Use the ic-badge-maker mixin with your own class. It takes four arguments, detailed below.

```css
.my-awesome-badge {
  @include ic-badge-maker(
    22px, // how large should the badge be? Default is 20px.
    $ic-color-success, // background color
    $ic-color-light, // text color
    12px // font-size
    );
}
```
*/


@mixin ic-badge-maker(
  $circle-size: 20px,
  $background-color: $ic-brand-primary,
  $text-color: $ic-color-light,
  $font-size: 11px) {

  @include fontSize($font-size);
  min-width: $circle-size;
  line-height: $circle-size;
  border-radius: $circle-size/2;
  background: $background-color;
  color: $text-color;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  padding: 0 6px;

}

.ic-badge {
  @include ic-badge-maker;
  &.ic-badge--neutral {
    background: $ic-bg-light-neutral;
    color: $ic-font-color-dark;
  }
  &.ic-badge--success { background: $ic-color-success; }
  &.ic-badge--alert { background: $ic-color-alert; }
  &.ic-badge--danger { background: $ic-color-danger; }
}